<template>
  <div id="TrainingPlan">
    <a-form layout="inline">
      <a-form-item label="关键字" class="searchItem">
        <a-input v-model="keyword" placeholder="请输入" />
      </a-form-item>
      <a-form-model-item label="课程信息" prop="curriculumId">
        <a-select v-model="curriculumId" style="width: 180px">
          <a-select-option
            v-for="item in curriculumIdList"
            :key="item.id"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-model-item>
      <a-form-item label="">
        <a-button type="primary" @click="getData">查询 </a-button>
        <a-button
          type="primary"
          style="margin-left: 10px"
          @click="addbtn(record)"
          >新增</a-button
        >
      </a-form-item>
    </a-form>
    <a-table
      bordered
      :scroll="{ y: 600 }"
      :columns="columns"
      style="margin-top: 16px"
      :data-source="tableData"
      :pagination="tablePagination"
      :rowKey="(record, index) => record.key"
      @change="handleTableChange"
    >
      <template slot="name" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.name">
          <template slot="title">
            <span>{{ record.name }}</span>
          </template>
          <span style="cursor: default">{{ record.name }}</span>
        </a-tooltip>
        <span v-else-if="!record.name">—</span>
      </template>
      <template slot="tapdProjectId" slot-scope="text, record">
        <a-tooltip placement="top" v-if="record.tapdProjectId">
          <template slot="title">
            <p>{{ record.tapdProjectId }}</p>
          </template>
          <span style="cursor: default">{{ record.tapdProjectId }}</span>
        </a-tooltip>
        <span v-else-if="!record.tapdProjectId">—</span>
      </template>
      <template slot="operation" slot-scope="text, record">
        <!-- <a-dropdown-button v-if="record.operation">
          操作
          <a-menu slot="overlay">
            <a-menu-item key="1" @click="begainExamine(record)">
              查看
            </a-menu-item>
            <a-menu-item key="2" @click="BindTopic(record)">
              绑定题目
            </a-menu-item>
            <a-menu-item key="3" @click="editClick(record)"> 修改 </a-menu-item>
            <a-menu-item key="4" @click="PermissionClick(record)">
              分配权限
            </a-menu-item>
            <a-menu-item key="5" @click="deleteClick(record)">
              删除
            </a-menu-item>
          </a-menu>
        </a-dropdown-button> -->
        <div v-if="record.operation">
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="begainExamine(record)"
            >查看</a-button
          >
          <a-button
            v-if="record.type == 1"
            type="primary"
            style="margin-left: 10px"
            @click="BindTopic(record)"
            >绑定题目</a-button
          >
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="editClick(record)"
            >修改</a-button
          >
          <a-button
            type="primary"
            style="margin-left: 10px"
            @click="PermissionClick(record)"
            >分配权限</a-button
          >
          <a-button
            type="danger"
            style="margin-left: 10px"
            @click="deleteClick(record)"
            >删除</a-button
          >
        </div>
      </template>
    </a-table>
    <a-modal v-model="visible" :title="title" :maskClosable="false">
      <a-form-model
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        ref="formRef"
        :model="form"
        :rules="rules"
      >
        <a-form-model-item label="课程名称" prop="curriculumId">
          <a-select v-model="form.curriculumId">
            <a-select-option
              v-for="item in curriculumIdList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="科目名称" prop="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="考核类型" prop="type">
          <a-select v-model="form.type">
            <a-select-option
              v-for="item in typeList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="路径" prop="path">
          <a-input v-model="form.path" />
        </a-form-model-item>
        <a-form-model-item label="限制时间" prop="assessmentTimeout">
          <a-input v-model="form.assessmentTimeout" suffix="分钟" />
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
    <a-modal
      v-model="BindTopicIsShow"
      :maskClosable="false"
      title="题目绑定"
      width="50%"
    >
      <a-form layout="inline">
        <a-form-item label="题目类型" class="searchItem">
          <a-select v-model="topicType" style="width: 180px">
            <a-select-option
              v-for="item in topicTypeList"
              :key="item.value"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="BindTopic">查询 </a-button>
        </a-form-item>
      </a-form>
      <a-table
        :scroll="{ y: 500 }"
        bordered
        :columns="BindTopicColumns"
        style="margin-top: 16px"
        :data-source="BindTopicData"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :rowKey="(record, index) => record.id"
      >
      </a-table>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="BindTopicCancel"
          >取消</a-button
        >
        <a-button key="submit" @click="BindTopicPrimary" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
    <a-modal v-model="visible2" :maskClosable="false" title="分配权限">
      <a-form-model
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 12 }"
        ref="formRef2"
        :model="form2"
        :rules="rules2"
      >
        <a-form-model-item label="教员选择" prop="userIds">
          <a-select
            v-model="form2.userIds"
            style="width: 236px"
            mode="multiple"
            :maxTagCount="1"
          >
            <a-select-option
              v-for="item in userIdList"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
      </a-form-model>
      <template slot="footer">
        <a-button key="back" class="modalCancel" @click="handleCancel2"
          >取消</a-button
        >
        <a-button key="submit" @click="primaryClick2" type="primary">
          确定
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import CourseInf from "@/components/LessonPlan/CourseInf.vue";
import StudentInf from "@/components/LessonPlan/StudentInf.vue";
import LessonPlan from "@/components/LessonPlan/index.vue";
import moment from "moment";
export default {
  components: {
    CourseInf,
    StudentInf,
    LessonPlan,
  },
  data() {
    return {
      FileId:null,
      userIdList:[],
      form2: {
        userIds: [],
      },
      rules2: {
        userIds: [{ required: true, message: "请选择教员", trigger: "blur" }],
      },
      topicId: "", //课程id
      trainId: "", //训练计划id
      topicType: "", //题目类型的选项
      BindTopicIsShow: false, //题目绑定弹出框是否展示
      BindTopicData: [],
      selectedRowKeys: [], //选中的行的key
      topicTypeList: [
        {
          value: 1,
          label: "单选",
        },
        {
          value: 2,
          label: "多选",
        },
        {
          value: 3,
          label: "选择题",
        },
      ],
      BindTopicColumns: [
        {
          title: "题目",
          dataIndex: "topic",
          scopedSlots: { customRender: "topic" },
        },
        {
          title: "题目类型",
          dataIndex: "type",
          scopedSlots: { customRender: "topic" },
          customRender: (text, record) => {
            if (record.type == 1) {
              return "单选";
            } else if (record.type == 2) {
              return "多选";
            } else if (record.type == 3) {
              return "选择题";
            }
          },
        },
        {
          title: "选项A",
          dataIndex: "optionA",
          scopedSlots: { customRender: "optionA" },
        },
        {
          title: "选项B",
          dataIndex: "optionB",
          scopedSlots: { customRender: "optionB" },
        },
        {
          title: "选项C",
          dataIndex: "optionC",
          scopedSlots: { customRender: "optionC" },
        },
        {
          title: "选项D",
          dataIndex: "optionD",
          scopedSlots: { customRender: "optionD" },
        },
        {
          title: "答案",
          dataIndex: "solution",
          scopedSlots: { customRender: "solution" },
        },
      ],
      curriculumId: "", //课程下拉选中的值
      curriculumIdList: [], //课程下拉框
      NameList: [
        {
          id: 1,
          name: "zwk",
        },
      ],
      keyword: null, //关键字
      typeList: [
        {
          value: 1,
          label: "在线理论考核",
        },
        {
          value: 2,
          label: "实操考核",
        },
      ],
      form: {
        id: null,
        curriculumId: "", // 课程
        name: "", //科目名称
        path: "", //路径
        type: "", //1是在线理论考核、2是实操考核
        assessmentTimeout: "", //限制时间
      },
      rules: {
        curriculumId: [
          { required: true, message: "请选择课程", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入科目名称", trigger: "blur" }],
        // path: [{ required: true, message: "请输入路径", trigger: "blur" }],
        type: [{ required: true, message: "请选择考核类型", trigger: "blur" }],
        assessmentTimeout: [
          { required: true, message: "请输入限制时间", trigger: "blur" },
          { pattern: /^[0-9]+$/, message: "请输入有效的数字", trigger: "blur" },
        ],
      },
      visible: false,
      visible2:false,
      title: null,
      columns: [
        //主页table列的配置
        {
          title: "序列号",
          dataIndex: "id",
          scopedSlots: { customRender: "id" },
        },
        {
          title: "科目名称",
          dataIndex: "name",
          customRender: (text, record) => {
            return record.name ? record.name : "—";
          },
        },
        {
          title: "路径",
          dataIndex: "path",
          customRender: (text, record) => {
            return record.path ? record.path : "—";
          },
        },
        {
          title: "科目类型",
          dataIndex: "type",
          customRender: (text, record) => {
            if (record.type == 1) {
              return "在线理论考核";
            } else if (record.type == 2) {
              return "在线实操考核";
            } else {
              return "——";
            }
          },
        },
        {
          title: "操作",
          width:460,
          align: "center",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
        },
      ],
      tableData: [
        //主页表格的数据
      ],
      tablePagination: {
        //主页表格的分页器
        total: 0,
        current: 1,
        pageSize: 10,
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true, //是否可以改变 pageSize
      },
    };
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys, //设置已选择的行
        onChange: this.onSelectChange, //选择变化时的回调
      };
    },
  },
  created() {
    this.getData();
    this.getCurriculumIdList(); //课程下拉框
    this.getUserIdList(); //获取教员的下拉选项
  },
  computed: {},
  methods: {
    handleCancel2() {
      this.form2.userIds = [];
      this.$refs.formRef2.resetFields();
      this.visible2 = false;
    },
    primaryClick2() {
      let data = {
        id: this.FileId,
        userIds: this.form2.userIds,
      };
      this.$axios.post("/training/plan/allot",data).then(res=>{
        if (res.code==200) {
          this.$message.success("分配权限成功");
          this.handleCancel2();
          this.getData();
        }
      })
    },
    getUserIdList() {
      this.$axios.get("/educator/options").then((res) => {
        if (res.code == 200) {
          this.userIdList = res.data;
        }
      });
    },
    PermissionClick(row){
      this.FileId = row.id;
      this.visible2 = true;
    },
    handleTableChange(pagination, filters, sorter) {
      this.tablePagination.current = pagination.current;
      this.tablePagination.pageSize = pagination.pageSize;
      this.getData();
    },
    BindTopicCancel() {
      //绑定题目的取消
      this.BindTopicData = [];
      this.selectedRowKeys = [];
      this.topicType = null; //考核类型
      this.topicId = null; //课程id
      this.trainId = null; //训练计划id
      this.BindTopicIsShow = false;
    },
    BindTopicPrimary() {
      //绑定题目的确定
      let data = {
        id: this.trainId,
        questionIds: this.selectedRowKeys,
      };
      this.$axios.post("/training/plan/set/question", data).then((res) => {
        if (res.code == 200) {
          this.$message.success("绑定成功");
          this.BindTopicCancel();
        }
      });
    },
    // 选择变化的回调函数
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    BindTopic(row) {
      //绑定题目
      if (row && row.curriculumId) {
        this.topicId = row.curriculumId; //课程基本信息id
      }
      if (row && row.id) {
        this.trainId = row.id; //训练计划id
      }
      this.$axios
        .get("/question/all", {
          params: {
            curriculumId: this.topicId,
            type: this.topicType,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.BindTopicData = res.data;
            this.BindTopicIsShow = true;
          }
        });
    },
    begainExamine(row) {
      if (row.type == 1) {
        //在线理论考核
        this.$router.push({ name: "OnlineTheory", query: { data: row } });
      } else if (row.type == 2) {
        //在线实操考核
        window.open(row.path);
      }
    },
    getCurriculumIdList() {
      //课程下拉框
      this.$axios.get("/curriculum/options").then((res) => {
        this.curriculumIdList = res.data;
      });
    },
    async getData() {
      let { data } = await this.$axios.get("/training/plan/page/list", {
        params: {
          page: this.tablePagination.current,
          size: this.tablePagination.pageSize,
          keyword: this.keyword, //关键字(也是课程计划名)
          curriculumId: this.curriculumId, //选择的课程
        },
      });
      data.records.forEach(item=>{
        let str="&Authorization="+localStorage.getItem("token");
        item.path=item.path?item.path+str:null;
      })
      this.tableData = data.records;
      this.tablePagination.total = data.total;
    },
    editClick(row) {
      //编辑
      this.$axios
        .get("/training/plan/detail", {
          params: {
            id: row.id,
          },
        })
        .then((res) => {
          if (res.code == 200) {
            this.form = {
              id: res.data.id,
              curriculumId: res.data.curriculumId, // 课程
              name: res.data.name, //科目名称
              path: res.data.path, //路径
              type: res.data.type, //考核类型
              assessmentTimeout: res.data.assessmentTimeout, //限制时间
            };
            this.title = "编辑";
            this.visible = true;
          }
        });
    },
    addbtn(row) {
      //新增
      this.form = {
        id: null,
        curriculumId: "", // 课程
        name: "", //科目名称
        path: "", //路径
        type: "", //考核类型
        assessmentTimeout: "", //限制时间
      };
      this.title = "新增";
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
    primaryClick() {
      this.$nextTick(() => {
        this.$refs.formRef.validate((valid) => {
          if (valid) {
            let data = {
              id: this.form.id,
              curriculumId: this.form.curriculumId, //课程
              type: this.form.type, //考核类型
              name: this.form.name, //科目名称
              path: this.form.path, //路径
              assessmentTimeout: this.form.assessmentTimeout, //限制时间
            };
            if (this.title == "新增") {
              this.$axios.post("/training/plan/create", data).then((res) => {
                if (res.code == 200) {
                  this.$message.success("新增成功");
                  this.getData();
                  this.visible = false; // 关闭模态框
                }
              });
            } else if (this.title == "编辑") {
              this.$axios.put("/training/plan/update", data).then((res) => {
                if (res.code == 200) {
                  this.$message.success("编辑成功");
                  this.getData();
                  this.visible = false; // 关闭模态框
                }
              });
            }
          } else {
            console.log("校验失败");
          }
        });
      });
    },
    deleteClick(row) {
      //点击删除
      let data = {
        id: row.id,
      };
      let that = this;
      this.$confirm({
        title: "确认删除?",
        content: "您确定要删除此项吗?",
        onOk() {
          that.$axios.delete("/training/plan/delete", { data }).then((res) => {
            if (res.code == 200) {
              that.$message.success("删除成功");
              that.getData();
            }
          });
        },
        onCancel() {
          console.log("取消删除");
        },
      });
    },
  },
};
</script>
<style scoped>
#TrainingPlan {
  padding: 24px 32px;
  margin: 30px 20px 0 20px;
  border-radius: 2px;
}
</style>
<style lang="scss">
#TrainingPlan {
  height: 800px;
  background: url("~@/assets/img/tableDataBg.png") repeat 100% !important;
  background-size: cover !important;
}
</style>